<!-- 收入详情 -->
<template>
  <view class="income">
		<view class="note">{{ info?.title || 0 }}</view>
		<view class="amount">
			<text class="title">总收入：</text>
			<text class="total">¥{{ info?.money || 0 }}</text>
		</view>
  </view>
	<view class="tab-wrapper">
		<tab-nav :nav-list="nav" @nav-tap="navTap"></tab-nav>
	</view>
	<view class="main-info">
		<block-view padding-top="0" v-for="(item,index) in detailList.data" :key="index">
			<view class="user-info">
				<image class="avatar" :src="item.user_info.avatar || '/static/images/logo.png'" mode="aspectFill"></image>
				<view class="right">
					<view class="name-wrapper">
						<view class="name-inner">
							<view class="name">{{ item.user_info?.name || '未知'}}</view>
							<image class="shop-auth" src="/static/icons/shop-auth.svg" mode="" v-if="false"></image>
						</view>
						<view class="date-time">{{ item.updated_at || item.created_at }}</view>
					</view>
					<view class="info">
						<view>{{ item.user_info?.sex == 0 ? '未知' : ( item.user_info?.sex == 1 ? '男' : '女' )}}</view>
						<view class="line"></view>
						<view>{{ item.user_info?.old+'岁' || '未知年龄' }}</view>
					</view>
				</view>
			</view>
			<view class="cost-wrapper">
				<view class="">
					<view class="cost-detail">费用明细：</view>
					<view class="cost-item">
						<text class="title">{{ item.level_name }}：</text>
						<text class="note">¥{{ item.level_price }}（1份）</text>
					</view>
				</view>
				<view class="money" v-if="status==1">+¥{{ item.level_price }}</view>
				<view class="money" v-if="status==2">-¥{{ item.level_price }}</view>
				<view class="money grey-color" v-if="status==3">+¥{{ item.level_price }}</view>
			</view>
		</block-view>
	</view>
	<uni-load-more v-if="detailList.data.length > 7" :status="loadStatus"></uni-load-more>
</template>

<script>
	import { useUserStore } from '../../../store/userStore';
	import tabNav from '../components/tab-nav.vue';
	
	export default {
		components: {
			tabNav,
		},
		data() {
			return {
				userStore: useUserStore(),
				nav: [{name: '已核验',id: 1},{name: '已退款', id: 2},{name: '已报名',id: 3}],
				info: {},
				detailList: {
					page: 1,
					hasMore: false,
					data: []
				},
				status: 1,
				loadStatus: 'more',
				activityId: 0,
				dateTime: '',
			}
		},
		onLoad() {
			const eventChannel = this.getOpenerEventChannel()
			eventChannel.on('checkIncomeDetail', (data) => {
				this.activityId = data.info.id;
				this.info = data.info;
				this.dateTime = data.dateTime;
				this.getDetailList();
			})
			
		},
		onReachBottom() {
			
		},
		methods: {
			// 导航栏点击事件
			navTap(index) {
				this.status = index + 1
				this.getDetailList(true)
			},
			// 获取详细的收益列表
			async getDetailList(refresh = false) {
				const res = await this.$request.get('/api/money/activity_monty_lists', {
					page: this.detailList.page,
					activity_id: this.activityId,
					status: this.status,
					date:this.dateTime,
				}, {load: false})
				if (res.code == 200) {
					this.loadStatus = 'more'
					const list = res.data?.lists || []
					this.detailList.hasMore = res.data.has_more_page
					if (refresh) {
						this.detailList.data = list
					} else {
						this.detailList.data = this.detailList.data.concat(list)
					}
				}
			}
		},
	}
</script>

<style scoped lang="scss">
	.income{
		padding: 30rpx 30rpx 20rpx 30rpx;
		.note {
			padding-bottom: 8rpx;
		}
		.amount {
			display: flex;
			align-items: center;
			font-weight: 500;
			.total {
				font-size: 48rpx;
			}
		}
	}
	.tab-wrapper {
		position: sticky;
		z-index: 2;
		top: 0;
		left: 0;
		right: 0;
		background-color: #f6f7f8;
	}
	.main-info {
		padding: 30rpx;
		
		.user-info {
			width: 100%;
			display: flex;
			align-items: center;
			padding: 32rpx 0 24rpx;
			border-bottom: 1px solid #e9e9e9;
			
			.avatar {
				width: 72rpx;
				height: 72rpx;
				border-radius: 50%;
				background-color: #eee;
			}
			.right {
				padding-left: 24rpx;
				width: calc(100% - 72rpx);
				.name-wrapper {
					display: flex;
					justify-content: space-between;
					align-items: center;
					
					.name-inner {
						display: flex;
						align-items: center;
					}
					.date-time  {
						font-size: 26rpx;
						color: #7B7B7B;
					}
					.name {
						font-weight: 500;
						font-size: 28rpx;
						max-width: 240rpx;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						text-overflow: ellipsis;
						line-clamp: 1;
						-webkit-line-clamp: 1;
						overflow: hidden;
					}
					.shop-auth {
						width: 36rpx;
						height: 36rpx;
						margin-left: 8rpx;
					}
				}
				.info {
					display: flex;
					align-items: center;
					color: #7B7B7B;
					font-size: 24rpx;
					.line {
						height: 24rpx;
						width: 1px;
						background-color: #999;
						margin: 0 20rpx;
					}
				}
			}
		}
	
		.cost-wrapper {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 24rpx 0 32rpx;
			.money {
				color: $uni-color-primary;
				font-weight: 500;
				font-size: 36rpx;
			}
			.grey-color {
				color: #7B7B7B;
			}
			.cost-detail {
				font-size: 26rpx;
				font-weight: 500;
				color: #262626;
				padding-bottom: 8rpx;
			}
			.cost-item {
				font-size: 26rpx;
				padding: 4rpx 0;
				.title {
					color: #262626;
				}
				.note {
					color: #7B7B7B;
				}
			}
		}
	}
</style>